<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>推荐位配置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/template.css" media="all">
</head>
<body>


<div class="layui-fluid layadmin-homepage-fluid">
    <div class="layadmin-homepage-panel">
        <div class="layui-card">
            <div class="layui-card-header">任务配置</div>
            <div class="layui-card-body">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">App</label>
                    <div class="layui-input-block" style="">
                        <select name="quick_id" lay-search lay-filter="search">
                            <option value="">请选择</option>
                            {foreach $qas as $v}
                            <option value="{$v.id}" {if $quick_id == $v.id}selected{/if}>{$v.name}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
            </form>
            </div>
        </div>
    </div>

    <div class="layui-card">
        <div class="layui-tab layui-tab-brief" lay-filter="tab">
        <ul class="layui-tab-title">
            <li class="layui-this" lay-id="2">日常任务</li>
            <li lay-id="3">签到</li>
        </ul>
        <div class="layui-tab-content">

            <div class="layui-tab-item layui-show">
                <div class="layui-form">
                    <table class="layui-table" lay-even lay-skin="nob">
                        <colgroup>
                            <col width="150">
                            <col width="300">
                            <col width="400">
                            <col width="150" style="text-align: center;">
                            <col width="250" style="text-align: center;">
                            <col width="150" style="text-align: center;">
                            <col width="200">
                        </colgroup>
                        <thead>
                        <tr>
                            <th>任务类型</th>
                            <th>任务名称</th>
                            <th>任务说明</th>
                            <th style="text-align: center;">书点奖励</th>
                            <th style="text-align: center;">状态</th>
                            <th style="text-align: center;">排序</th>
                            <th style="text-align: center;">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {foreach $taskData as $k => $v}
                        {in name="$k" value="read,pay_give"}
                        <tr>
                            {if $k == 'read'} <td>阅读X章节</td>{/if}
                            {if $k == 'pay_give'}<td>充值赠送</td>{/if}
                            <td>{$v['title']}</td>
                            <td>{$v['desc']}</td>
                            <td style="text-align: center;">{$v['point']}</td>
                            <td style="text-align: center;">
                                <input type="checkbox" lay-skin="switch" lay-filter="display" name="{$k}" lay-text="上架|下架" {if $v['display'] == 1}checked{/if}>
                            </td>
                            <td style="text-align: center;">{$v['sort']}</td>
                            <td style="text-align: center;">
                                <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-event="edit" onclick="editTask('{$k}');">编辑</a>
                            </td>
                        </tr>
                        {/in}
                        {/foreach}
                    </table>
                </div>
            </div>
            <div class="layui-tab-item">
                <table id="LAY-sign" lay-filter="LAY-sign"></table>
            </div>
        </div>
    </div>
    </div>
</div>

<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','element'],function () {
        var $ = layui.$
            ,admin = layui.admin
            ,form = layui.form
            ,element = layui.element;

        //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
        var layid = location.hash.replace(/^#tab=/, '');
        element.tabChange('tab', layid);

        //监听Tab切换，以改变地址hash值
        element.on('tab(tab)', function(data){
            location.hash = 'tab='+ this.getAttribute('lay-id');
            if(data.index==3)table.resize('LAY-sign');
            layid = this.getAttribute('lay-id');
        });

        //监听选择App
        form.on('select(search)', function(data){
            location.href = "/website/taskConfig?quick_id=" + data.value + '#tab=' + layid;
        });

        form.on('switch(display)', function(data){
            var name = $(data.elem).attr('name');
            var display = 0;
            if (data.elem.checked){
                display = 1;
            }
            admin.req({
                url: '/website/setTaskDisplay'
                , type: "POST"
                , data: {'key': name, 'display': display,'quick_id':'{$quick_id}'}
                , done: function (res) {
                    layer.msg('设置成功', {icon: 1, time: 1000}, function () {
                    });
                }, not_finish: function (res) {
                    layer.msg(res.msg,function () {
                        window.location.reload();
                    });
                }
            });
        });

        form.on('submit(formDemo)', function(data){
            admin.req({
                url: '/website/setTaskConfig'
                , type: "POST"
                , data: data.field
                , done: function (res) {
                    layer.msg('设置成功', {icon: 1, time: 1000}, function () {
                    });
                }, not_finish: function (res) {
                    layer.msg(res.msg,function () {
                        window.location.reload();
                    });
                }
            });
            return false;
        });
    });
</script>
<script>
    function editTask(key){
        var height = '500px';
        if (key === 'calendar'){
            height = '730px';
        }else {
            height = '450px';
        }
        layer.open({
            type: 2
            , maxmin: true//开启最大化最小化按钮
            , title: '修改任务'
            , content: '/website/editTask?quick_id={$quick_id}&key=' + key
            , offset: '10px'
            , area: ['500px', height]
            , btn: ['保存', '取消']
            , yes: function (index, layero) {
                var iframeWindow = window['layui-layer-iframe' + index]
                    , submit = layero.find('iframe').contents().find("#LAY-user-role-submit");
                //监听提交
                iframeWindow.layui.form.on('submit(LAY-user-role-submit)', function (data) {
                    var field = data.field; //获取提交的字段
                    //提交 Ajax 成功后，静态更新表格中的数据
                    //$.ajax({});
                    layui.admin.req({
                        url: '/website/editTask'
                        , type: "POST"
                        , data: field
                        , done: function (res) {
                            layer.msg('修改成功', {icon: 1, time: 2000}, function () {
                                layer.close(index,function () {
                                    window.location.reload();
                                }); //关闭弹层
                            });
                        }, not_finish: function (res) {
                            layer.msg(res.msg);
                        }
                    });
                });

                submit.trigger('click');
            }
        });
    }
</script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','table'],function () {
        var $ = layui.$
            ,admin = layui.admin
            ,table = layui.table
            ,form = layui.form;

        table.render({
            elem: '#LAY-sign'
            , url: '/website/signConfig?quick_id={$quick_id}'
            , size: 'sm' //小尺寸的表格
            , response: {
                statusCode: 1 //规定成功的状态码，本来是：0，现在统一改为1
            }
            , cols: [[
                {
                    title: '天数', templet: function (d) {
                        return "第" + d.LAY_TABLE_INDEX + "天";
                    }
                }
                , {field: 'point', title: '赠送书点',edit: 'text'}
            ]]
        });


        //监听单元格编辑
        table.on('edit(LAY-sign)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj.value); //得到修改后的值
            var rowIndex = $(obj.tr).attr("data-index");
            console.log(rowIndex);
            admin.req({
                url: '/website/setSignPoint'
                , type: "POST"
                , data: {'index': rowIndex, 'point': obj.value,'quick_id':'{$quick_id}'}
                , done: function (res) {
                    layer.msg('修改成功', {icon: 1, time: 1000}, function () {
                    });
                }, not_finish: function (res) {
                    layer.msg(res.msg);
                }
            });
        });
    });
</script>
</body>
</html>